<template>
  <div v-show="banners.length > 0">
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
      <swiper-slide
        v-for="(item, index) in banners"
        :key="index"
        class="swiper-item"
      >
        <img v-lazy="item.cover" alt="" />
      </swiper-slide>
      <!-- 分页 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--导航按钮-->
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    banners: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: {
          loop: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 自动轮播
        autoplay: {
          delay: 1200, // 时间 毫秒
          disableOnInteraction: false, // 用户操作之后是否停止自动轮播默认true
        },
        slidesPerView: 1, // 一行显示几个
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper;
    // },
  },
  mounted() {
    // this.swiper.slideTo(3, 1000, false)
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 120px;
  // background-color: red;
  .swiper-item {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
